<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #app {
            height: 100vh;
            /*设置为弹性盒布局*/
            display: flex;
            /*宽度不够时是否允许换行*/
            flex-wrap: wrap;
            /*布局方向row为横向， 或者称主轴为横向*/
            flex-direction: column;
            /*主轴对齐方式*/
            justify-content: space-between;
            /*交叉轴对齐方式 所有子元素统一的对齐方式*/
            align-items: center;
        }

        #app div {
            width: 80px;
            height: 80px;
            border: 1px solid black;
            margin-right: 10px;
        }
        #app div:nth-child(1){
            /*单独定义某个元素的对齐方式*/
            align-self: flex-start;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>

</html>